iT邦幫忙

2024 iThome 鐵人賽

DAY 7
1
Modern Web

JavaScript學習筆記系列 第 7

[Day 07] 迴圈 - while、do...while

  • 分享至 

  • xImage
  •  

上一篇是講for迴圈,今天來分享另外常見的迴圈—whiledo...while

while

語法

while (condition)
  statement

condition:()小括號符合條件時,就會執行statement。

範例:

let i = 0;

while (i < 5) {  //i小於5,符合條件則執行大括號程式碼
    console.log(i);  //依次印出0,1,2,3,4
    i++;
}

console.log(i);//此時i是多少?

while比較單純,程式碼都是由上到下,當符合又回到while。
自己理解的圖:
while
此時i的值是多少?
i = 4時,仍符合i <= 5的條件,所以執行到i++,此時i = 5,那i < 5嗎?沒有,所以迴圈終止。

do...while

do意思是它會「先執行一次statement」,再判斷條件,決定是否繼續執行。

語法

do
  statement
while (condition);

範例:

let i = 0;

do {
  console.log(i); //先執行一次迴圈內容,依次印出0,1,2,3,4
  i++;
} while (i < 5); //再判斷條件

console.log(i); //此時i是多少?

此時i的值是多少?
i = 3時,又i++成為4,仍符合i < 5的條件
i = 4,又i++成為5,那i < 5嗎?沒有了,所以迴圈終止。

補充:小心無窮迴圈

當條件永遠為true,會形成無窮迴圈,程式重複執行著,例如:

let i = 1;

while(i<=5){
  console.log(i); //因為i值一直是1
}

無窮迴圈出現,瀏覽器會當機、npm告知Maximum call stack size exceeded!

真的發生時趕快瀏覽器關掉,terminal可以使用ctrl+c讓程式中斷。

for v.s while v.s do...while

最後整理這幾個迴圈的重點:

  • for
  1. 「明確知道」要跑幾次迴圈情況
  • while
  1. 先判斷條件,條件成立才執行內容
  2. 用在「不確定要跑幾次迴圈」的情況
  • do...while
  1. 先執行內容,再判斷條件,即便一開始條件就不成立
  2. 應用的地方例如使用者輸入資料,再檢查條件

迴圈們都可以搭配breakcontinue來控制。

以上分享,如有錯誤請不吝告知~謝謝

參考資料

MDN - while
MDN - do...while
重新認識 JavaScript: Day 09 流程判斷與迴圈


上一篇
[Day 06] 迴圈 - for
下一篇
[Day 08] 遞迴函式 Recursion
系列文
JavaScript學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
jeremykuo
iT邦新手 5 級 ‧ 2024-09-21 21:35:50

「自己理解的圖」好理解!

圖下面的敘述:
「當i = 4時,仍符合i <= 5的條件,所以執行到i++,此時i = 5,那i < 5嗎?」這句前面的是不是符合「i < 5」而不是「i <= 5」呢?

我要留言

立即登入留言